<script lang="ts">

import router from '@/router';
import { onMounted } from 'vue';
import { ref , toRaw } from 'vue';
import { saveStore, cityStore } from "../stores/city";
import datalists from "../function/datalist";
import { publishncStore } from '@/stores/publish'

export default {
    components: {

    },
    setup() {

        let commentList:any = toRaw(publishncStore().$state.publishnc);
        console.log(commentList);

        
        let active = ref(0);
        let fini: any = (saveStore().$state.save)[8].fini;

        let money: any = (saveStore().$state.save)[5].money; // 装修预算
        let starttime2: any = (saveStore().$state.save)[1].starttime2; // 入住时间
        let space: any = (saveStore().$state.save)[4].space; // 房屋面积
        let starttime: any = (saveStore().$state.save)[0].starttime; // 开工时间
        let houstypes: any = (saveStore().$state.save)[3].houstypes; // 房屋户型
        let city: string = cityStore().$state.city // 地址

        const goPage = (path: any) => {
            router.push(path);
        }


        const saveFun = () => {
            let Store = saveStore().$state.save;
            console.log(Store);

            money = Store[5].money;
            starttime2 = Store[1].starttime2;
            space = Store[4].space;
            starttime = Store[0].starttime;
            houstypes = Store[3].houstypes;
        }


        datalists.datalist();

        let articleList = datalists.datalist().articleList;

        onMounted(() => {
            saveFun();
        })

        return {
            active,
            goPage,
            money,
            starttime2,
            space,
            starttime,
            houstypes,
            city,
            articleList,
            fini,
            commentList
        };
    },
};
</script>

<template>
    <div class="about">
        <div class="bg_img">
            <img src="../assets/images/myhome-Icon/ic_my_huose_bg.png">
        </div>
        <div class="about_con">
            <div class="about_con_message">
                <div class="message_title">
                    <h3>{{ fini }}</h3>
                    <span @click="goPage('/message')">
                        <img src="../assets/images/myhome-Icon/ic_my_comment.png">
                        编辑
                    </span>
                </div>
                <div class="message_con">
                    <div class="message_con_item">
                        <img src="../assets/images/myhome-Icon/ic_house_size.png">
                        装修预算
                        <i>{{ money == '' ? "--" : money }}</i>
                    </div>
                    <div class="message_con_item">
                        <img src="../assets/images/myhome-Icon/ic_house_check_in_time.png">
                        入住时间
                        <i>{{ starttime2 == null ? "--" : starttime2 }}</i>
                    </div>
                    <div class="message_con_item">
                        <img src="../assets/images/myhome-Icon/ic_house_size.png">
                        房屋面积
                        <i>{{ space == '' ? "--" : space }}</i>
                    </div>
                    <div class="message_con_item">
                        <img src="../assets/images/myhome-Icon/ic_house_start_time.png">
                        开工时间
                        <i>{{ starttime == null ? "--" : starttime }}</i>
                    </div>
                    <div class="message_con_item">
                        <img src="../assets/images/myhome-Icon/ic_house_house.png">
                        房屋户型
                        <i>{{ houstypes == null ? "--" : houstypes }}</i>
                    </div>
                    <div class="message_con_item">
                        <img src="../assets/images/myhome-Icon/ic_house_location.png">
                        房屋地址
                        <i>{{ city }}</i>
                    </div>
                </div>
            </div>
            <div class="about_con_tool">
                <h3>常用工具</h3>
                <div class="tool_con">
                    <div class="item">
                        <div class="tool_con_item_title">
                            <p>装修日记</p>
                            <img src="../assets/images/myhome-Icon/ic_brand_more.png" @click="goPage('/Rreleaser')">
                        </div>
                        <div class="tool_con_item_txt">
                            <p>
                                记录家的装修
                                <img src="../assets/images/myhome-Icon/ic_house_tools_add.png"
                                    @click="goPage('/Rreleaser')">
                            </p>
                            <img src="../assets/images/myhome-Icon/ic_shopping_bag.png">
                        </div>
                    </div>

                    <div class="item">
                        <div class="tool_con_item_title">
                            <p>装修记账</p>
                            <img src="../assets/images/myhome-Icon/ic_brand_more.png" @click="goPage('/billrecord')">
                        </div>
                        <div class="tool_con_item_txt">
                            <p>
                                每笔花费都有数
                                <img src="../assets/images/myhome-Icon/ic_house_tools_add.png"
                                    @click="goPage('/billtally')">
                            </p>
                            <img src="../assets/images/myhome-Icon/ic_shopping_bag.png">
                        </div>
                    </div>

                    <div class="item">
                        <div class="tool_con_item_title">
                            <p>装修代办</p>
                            <img src="../assets/images/myhome-Icon/ic_brand_more.png">
                        </div>
                        <div class="tool_con_item_txt">
                            <p>
                                掌握装修全过程
                            </p>
                            <img src="../assets/images/myhome-Icon/ic_shopping_bag.png">
                        </div>
                    </div>

                    <div class="item">
                        <div class="tool_con_item_title">
                            <p>我的清单</p>
                            <img src="../assets/images/myhome-Icon/ic_brand_more.png">
                        </div>
                        <div class="tool_con_item_txt">
                            <p>
                                0个商品
                            </p>
                            <img src="../assets/images/myhome-Icon/ic_shopping_bag.png">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 收藏 -->
            <div class="about_con_collect">
                <div class="collect_left">
                    <p>我的收藏</p>
                    <span>把你的灵感收入口袋</span>
                </div>
                <img src="../assets/images/myhome-Icon/ic_brand_more.png">
            </div>

            <!--  -->
            <van-tabs v-model:active="active" animated>
                <van-tab :title="'案例推荐'">
                    <div class="tabs_item" v-if="articleList" v-for="item in articleList">
                        <div class="image">
                            <img :src="item.picUrl + '?x-oss-process=image/format,webp'">
                            <div class="picture">
                                <img :src="item.caseDetail.designerPicUrl + '?x-oss-process=image/format,webp'">
                                <span>{{ item.caseDetail.designerName }}</span>
                            </div>
                        </div>
                        <p>{{ item.caseDetail.caseName }}·{{ item.caseDetail.communityName }}</p>
                        <span>
                            {{ item.houseLayoutName }}
                            <i>·</i>
                            {{ item.houseSpace }}
                            <i>·</i>
                            {{ item.styleName }}
                            <i>·</i>
                            {{ item.cityName }}
                        </span>
                    </div>
                </van-tab>

                <van-tab :title="'日记广场'">
                    <div class="diary_null" v-if="commentList[0].length==0 && commentList[1].length==0 && commentList[2].length==0 && commentList[3].length==0 && commentList[4].length==0">暂时还没有内容哦！</div>
                    <div class="diary_list">
                        <div class="diary_list_item" v-if="commentList[0].length!==0">
                            <p>开工前</p>
                            <div class="diary_item_syle" v-for="(item , index) in commentList[0]" :key="index">
                                <div class="syle_title">{{item.title}}</div>
                                <div class="syle_con">{{item.content}}</div>
                                <img :src="item.pics[0].content">
                            </div>
                        </div>
                        <div class="diary_list_item" v-if="commentList[1].length!==0">
                            <p>施工中</p>
                            <div class="diary_item_syle" v-for="(item , index) in commentList[1]" :key="index">
                                <div class="syle_title">{{item.title}}</div>
                                <div class="syle_con">{{item.content}}</div>
                                <img :src="item.pics[0].content">
                            </div>
                        </div>
                        <div class="diary_list_item" v-if="commentList[2].length!==0">
                            <p>买建材</p>
                            <div class="diary_item_syle" v-for="(item , index) in commentList[2]" :key="index">
                                <div class="syle_title">{{item.title}}</div>
                                <div class="syle_con">{{item.content}}</div>
                                <img :src="item.pics[0].content">
                            </div>
                        </div>
                        <div class="diary_list_item" v-if="commentList[3].length!==0">
                            <p>家电软装</p>
                            <div class="diary_item_syle" v-for="(item , index) in commentList[3]" :key="index">
                                <div class="syle_title">{{item.title}}</div>
                                <div class="syle_con">{{item.content}}</div>
                                <img :src="item.pics[0].content">
                            </div>
                        </div>
                        <div class="diary_list_item" v-if="commentList[4].length!==0">
                            <p>入住新家</p>
                            <div class="diary_item_syle" v-for="(item , index) in commentList[4]" :key="index">
                                <div class="syle_title">{{item.title}}</div>
                                <div class="syle_con">{{item.content}}</div>
                                <img :src="item.pics[0].content">
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>

    </div>
</template>
  
<style lang="scss" scoped>
.bg_img {
    width: 100%;
    height: 200px;

    img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.about_con {
    position: relative;
    top: -60px;

}

.about_con_message {
    background-color: #fff;
    margin: 0 12px;
    border-radius: 10px;

    .message_title {
        padding: 12px;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;

        h3 {
            font-size: 18px;
            font-weight: 600;
        }

        span {
            font-size: 14px;
            color: #3ab6b7;
            font-weight: 500;
            padding: 2px 10px;
            border: 1px solid #3ab6b7;
            border-radius: 20px;

            img {
                height: 20px;
                width: 20px;
                display: inline-block;
                vertical-align: -4px;
            }
        }
    }

    .message_con {
        display: flex;
        flex-wrap: wrap;
        padding: 0px 12px;

        .message_con_item {
            width: 50%;
            color: #a9a9a9;
            font-size: 12px;
            margin-bottom: 10px;
            display: flex;

            img {
                width: 20px;
                height: 20px;
                display: inline-block;
                vertical-align: middle;
            }

            i {
                color: #000;
                max-width: 80px;
                display: inline-block;
                margin-left: 8px;
            }
        }
    }
}

.about_con_tool {
    margin: 0px 12px;
    margin-top: 10px;
    background-color: #fff;
    padding: 0px 12px;
    border-radius: 10px;

    h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .tool_con {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 15px;

        .item {
            width: 45%;
            padding: 10px 5px;
            margin-bottom: 10px;
            background: url("../assets/images/myhome-Icon/bg_creator_center_top.png");
        }
    }

    .tool_con_item_title {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 5px;

        img {
            width: 10px;
            height: 15px;
            display: block;
        }
    }

    .tool_con_item_txt {
        display: flex;
        justify-content: space-between;

        p {
            font-size: 13px;

            img {
                margin-top: 10px;
            }
        }

        img {
            width: 50px;
            height: auto;
            display: block;
        }
    }
}

.about_con_collect {
    margin: 0px 12px;
    margin-top: 15px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;

    .collect_left {
        p {
            margin-bottom: 3px;
            font-weight: 700;
            font-size: 18px;
        }

        span {
            color: #898989;
        }
    }

    img {
        width: 10px;
        height: 15px;
        display: block;
    }
}

.van-tabs {
    width: 100%;
    padding: 0px 12px;
    box-sizing: border-box;

    .tabs_item {
        margin-top: 20px;
    }

    .image {
        width: 100%;
        height: 190px;
        border-radius: 10px;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .picture {
            position: absolute;
            bottom: 10px;
            left: 10px;

            img {
                width: 25px;
                height: 25px;
                display: inline-block;
                border-radius: 50%;
                vertical-align: -5px;
            }

            span {
                font-size: 14px;
                margin-left: 10px;
            }
        }
    }

    p {
        margin-top: 10px;
        font-size: 16px;
    }

    span {
        font-size: 14px;
        color: #898989;
    }
}

.diary_null {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.diary_list {
    p {
        margin: 0px;
        height: 22px;
        font-size: 20px;
        font-weight: 700;
        position: sticky;
        top: 0;
        left: 0;
    }

    .diary_list_item {
        margin: 0px 4px;
        padding: 0px 8px;
        border-left: 1px solid red;

        p {
            margin: 0px;
            height: 25px;
            font-size: 20px;
            font-weight: 700;
            position: sticky;
            top: 0;
            left: 0;
        }

        p::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: -13px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #3ab6b7;
        }

        p::after {
            content: '';
            display: block;
            position: absolute;
            top: 3px;
            left: -10px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: white;
        }
    }

    .diary_item_syle {
        margin-top: 20px;
        padding-bottom: 10px;

        .syle_title {
            font-size: 16px;
            font-weight: 700;
        }

        .syle_con {
            margin-top: 5px;
            font-size: 14px;
        }

        img {
            margin-top: 8px;
            width: 100px;
            height: 100px;
            display: block;
        }
    }
}
</style>